<template>
    <MessageBox>
        <div class="phoneMiniPrograme">
            <div class="title">
                <img v-if="appInfo?.ThumbURL" :src="appInfo?.ThumbURL" alt="">
                <img v-else src="@renderer/assets/imgs/phonePreview/Appletbg.png" alt="" />
                <span v-if="appInfo?.Title">{{ appInfo?.Title }}</span>
                <span v-else>营销小助手</span>
            </div>
            <div class="mintitle">
                <span>{{ props.materialsInfo.title }}</span>
            </div>
            <div class="content">
                <img :src="props.materialsInfo.thumbUrl" alt="" />
            </div>
            <div class="footer">
                <img src="@renderer/assets/imgs/phonePreview/Applet.png" alt="" />
                <span>小程序</span>
            </div>
        </div>
    </MessageBox>
</template>

<script setup lang="ts">
import { ref, defineProps, onBeforeMount } from 'vue';
import MessageBox from './MessageBox.vue';
import { getMiniAppInfoByAppid } from './getMiniAppInfo'

const props = defineProps(['materialsInfo']);

const appInfo = ref({})

onBeforeMount(async () => {
    const info = await getMiniAppInfoByAppid(props.materialsInfo.appId)
    console.log('info: ', info, props.materialsInfo.appId);
    appInfo.value = info
})
</script>
<style lang="scss" scoped>
.phoneMiniPrograme {
    .title {
        display: flex;
        align-items: center;

        img {
            width: 20px;
            height: 20px;
        }

        span {
            flex: 1;
            width: 0;
            padding-left: 6px;
            font-size: 11px;
            color: #969696;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .mintitle {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 400;
        color: #34302d;
        line-height: 20px;
        margin-top: 10px;
        word-break: break-all;
    }

    .content {
        margin: 12px 0;
        width: 100%;
        height: 140px;
        overflow: hidden;

        img {
            width: 100%;
            // height: 100%;
        }
    }

    .footer {
        display: flex;
        align-items: center;
        border-top: 1px solid #eaeaea;
        padding-top: 8px;

        img {
            width: 12px;
            height: 12px;
        }

        span {
            flex: 1;
            width: 0;
            padding-left: 6px;
            font-size: 12px;
            color: #666;
        }
    }
}
</style>
